<template>
  <div
    class="ScaleBox"
    ref="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px'
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ScaleBoxLongStrip',
  props: {
    fullType: {
      type: String,
      default: 'widthFull'
    }
  },
  data() {
    return {
      scale: 0,
      width: 2088,
      height: 609
    };
  },
  mounted() {
    this.setScale();
    window.addEventListener('resize', this.debounce(this.setScale));
  },
  methods: {
    getScale() {
      const { width, height } = this;
      const wh = window.innerHeight / height;
      const ww = window.innerWidth / width;
      console.log(window.innerWidth);
      console.log(window.innerHeight);
      console.log(ww);
      console.log(wh);
      return { 'vw': ww, 'vh': wh };
      // console.log(ww < wh ? ww : wh);
      // return ww < wh ? ww : wh;
    },
    setScale() {
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        if (this.fullType == 'widthFull') {
          this.$refs.ScaleBox.style.setProperty('--scale', this.scale.vw);
        } else if (this.fullType == 'heightFull') {
          this.$refs.ScaleBox.style.setProperty('--scale', this.scale.vh);
        } else if (this.fullType == 'autoFull') {
          this.$refs.ScaleBox.style.setProperty('--scale', this.scale.vw < this.scale.vh ? this.scale.vw : this.scale.vh);
        } else if (this.fullType == 'allFull') {
          this.$refs.ScaleBox.style.setProperty('--scale', [this.scale.vw, this.scale.vh]);
        }
      }
      // if (this.$refs.ScaleBox) {
      //   this.$refs.ScaleBox.style.setProperty('--scale', this.scale);
      // }
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return () => {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    }
  }
};
</script>

<style lang="less">
#ScaleBox {
  --scale: 1;
}
.ScaleBox {
  display: flex;
  transform: scale(var(--scale));
  transform-origin: left top;
  box-sizing: border-box;
  // position: absolute;
  // transform: scale(var(--scale)) translate(-50%, -50%);
  // display: flex;
  // flex-direction: column;
  // transform-origin: 0 0;
  // left: 50%;
  // top: 50%;
  // transition: 0.3s;
  // z-index: 999;
  // background: rgba(255, 0, 0, 0.3);
}
</style>
